<template>
  <div>
    <van-form>
      <van-cell-group inset>
        <h3>并购信息</h3>
        <bob-select
          v-model:bindModel="
            publicForm.businessOpportunityContentVO.opporContType
          "
          label="交易目的"
          placeholder="请选择"
          :picker-list="businessList"
          :rules="[
            { required: true, message: '请选择交易目的', trigger: 'onChange' },
          ]"
        ></bob-select>
      </van-cell-group>
      <van-cell-group inset>
        <h3>并购需求描述</h3>
        <van-field
          v-model="publicForm.businessOpportunityContentVO.contDesc"
          rows="2"
          autosize
          type="textarea"
          placeholder="在这里输入并购需求描述…"
          maxlength="500"
          show-word-limit
        />
      </van-cell-group>
      <van-cell-group inset>
        <h3>交易对手画像详述</h3>
        <van-field
          v-model="publicForm.businessOpportunityContentVO.contDesc"
          rows="2"
          autosize
          type="textarea"
          placeholder="在这里输入交易对手画像详述…"
          maxlength="200"
          show-word-limit
        />
      </van-cell-group>
    </van-form>
    <van-form style="margin-top: 12px">
      <van-cell-group inset>
        <div class="form-title">
          <h3>并购画像</h3>
          <van-icon name="plus" size="16" @click="addPortrait" />
        </div>
        <div class="portrait">
          <div v-for="(item, index) in 5" class="portrait-item">
            <van-cell-group>
              <van-cell title="指标" value="内容" />
              <van-cell title="目标范围" label="目标范围" />
            </van-cell-group>
            <div class="portrait-item__tools pr-15">
              <!-- <van-button class="mr-10" type="primary" size="small"
                >编辑</van-button
              > -->
              <van-icon
                class="mr-5"
                name="edit"
                size="16"
                @click="editPortrait(item)"
              />
              <van-icon name="delete-o" size="16" @click="delPortrait(index)" />
              <!-- <van-button type="danger" size="small">删除</van-button> -->
            </div>
          </div>
        </div>
      </van-cell-group>
    </van-form>
    <van-form style="margin-top: 12px">
      <van-cell-group inset>
        <h3>附件上传</h3>
        <van-field name="uploader">
          <template #input>
            <van-uploader />
          </template>
        </van-field>
      </van-cell-group>
    </van-form>
    <van-form style="margin-top: 12px">
      <van-cell-group inset>
        <h3>商业计划书</h3>
        <van-field name="uploader">
          <template #input>
            <van-uploader />
          </template>
        </van-field>
      </van-cell-group>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { useBusinessPub } from "@/stores/businessPub";
import { storeToRefs } from "pinia";
import { showConfirmDialog } from "vant";
const store = useBusinessPub();
const { publicForm } = storeToRefs(store);

const router = useRouter();

const businessList = ref<any[]>([
  {
    text: "京东",
    value: "JD",
  },
]);

const delPortrait = (index: number) => {
  showConfirmDialog({
    title: "提示",
    message: "确定要删除吗？",
  })
    .then(() => {
      // on confirm
    })
    .catch(() => {
      // on cancel
    });
};

const editPortrait = (data: any) => {
  console.log(data);
};

const addPortrait = () => {
  router.push({
    name: "portrait",
  });
};
</script>

<style lang="scss" scoped>
h3 {
  padding: 16px 16px 8px;
  color: #000;
  font-weight: bold;
  font-size: 16px;
}

.form-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 15px;
}

:deep(.van-cell-group--inset) {
  margin: 0;
}

.portrait {
  &-item {
    margin-bottom: 12px;

    &__tools {
      display: flex;
      justify-content: flex-end;
      margin-top: 8px;
    }
  }
}
</style>

